<template>
	<div class="help" v-moveout="hideMenu">
	<div class="help-name" @mouseenter="showMenu" @mouseleave="show=0">
		<slot></slot>
	</div>
	<div id="helpdiv" ref="helpdiv" class="drop-menu-items" @mouseenter="show=1" :class="{'drop-menu-open':show==1,'drop-menu-close':show==0}" >		
		<template v-for="(item,index) in Array.from(menuitems)">			
			<div class="drop-menu-item" :style="'width:'+rowwidth+'px;line-height:'+rowheight+'px;'" @click="itemclick(item,index)">			
					<span :class="item.iconname" class="iconfont drop-menu-item-icon"></span>
					{{item.name}}						
			</div>			
		</template>
		<div v-if="placement=='top'" v-show="show == 1" class="toparrow" ref='arrow'></div>
		<div v-if="placement=='left'" v-show="show == 1" class="leftarrow" ref='arrow'></div>
		<div v-if="placement=='right'" v-show="show == 1" class="rightarrow" ref='arrow'></div>
		<div v-if="placement=='bottom'" v-show="show == 1" class="bottomarrow" ref='arrow'></div>
	</div>	
	</div>
</template>

<script>	
	import moveout from "@/directives/moveout.js"
	export default {
		name: "helpMemu",//下拉菜单	
		directives: { moveout },
		props: {
			rowwidth: {
				default: 127
			},				
			rowheight: {
				default: 34
			},				
			menuitems: null,			
			trriger:{default:'hover'},
			placement:{default:'top'},
			menuleft:{
				default:0
			},
			arrowleft:{
				default:0
			},
			scrollTop:{default:0},
			parentitem:{default:null}
		},
		watch: {			
			
		},
		data() {
			return {
				show: -1,
				scrollLeft:0,
				etarget:null,
				menuHeight:0
			}
		},
		computed: {

		},
		methods: {
			hideMenu(e){
				if(this.show == 1){					
					if(	e.clientX>this.$refs.helpdiv.offsetLeft
						&& e.clientX< this.$refs.helpdiv.offsetLeft + this.rowwidth
						&& e.clientY> this.$refs.helpdiv.offsetTop 
						&& e.clientY< this.$refs.helpdiv.offsetTop  + this.menuHeight){							
					}else{
						this.show = 0;
					}					
				}				
			},
			itemclick(item,index) {
				this.show = 0;
				setTimeout( () => {
					this.$emit('dropitemclick',item,index);
					this.$emit('close', true);
				},300);
				
			},
			showMenu(e){
				this.show = 1;
				//e.target.offsetLeft  target.offsetHeight
				this.scrollLeft = e.target.ownerDocument.childNodes[1].scrollLeft;
				this.etarget = e.target;
				this.$refs.helpdiv.style.top = this.$refs.helpdiv.offsetTop - this.scrollTop + 'px';
				this.$refs.helpdiv.style.left = e.target.offsetLeft - this.scrollLeft + this.menuleft +(this.$refs.helpdiv.parentNode.offsetWidth - this.$refs.helpdiv.offsetWidth) + 'px';	
				this.$refs.arrow.style.top = this.$refs.helpdiv.offsetTop - 10 - this.scrollTop + 'px';
				this.$refs.arrow.style.left = e.target.offsetLeft - this.scrollLeft + this.arrowleft + parseInt(this.$refs.helpdiv.parentNode.offsetWidth /2) + 'px';
			},
			mouseleave(e){						
				if(e.offsetX <= 0 || e.offsetX >= this.rowwidth || e.offsetY <= 0){
					if(e.clientX >= (this.etarget.offsetLeft - this.scrollLeft) && e.clientX <= (this.etarget.offsetWidth + this.etarget.offsetLeft - this.scrollLeft)){
							
						}else{
							this.show = 0;
						}
				}else{
					if(e.offsetY > 30){
						this.show = 0
					}
				}
			}
		},
		mounted() {
			this.menuHeight = this.menuitems.length * this.rowheight + 20; 			
			this.$refs.helpdiv.style.setProperty('--menu-height', this.menuHeight + 'px');
			this.$refs.helpdiv.style.setProperty('--dot-margin-top',(this.rowheight - 6)/2 +'px');
			
			
			
		}
	}
</script>

<style scoped>		
	#messagediv{
		--menu-height:0px;
		--dot-margin-top:0px;
	}
	.drop-menu-items {	
		background: var(--page-back-color);
		color:var(--page-lable-text-color);			
		box-shadow:0px 10px 20px 0px var(--drop-menu-boxshadow-color), 0px -10px 20px 0px var(--drop-menu-boxshadow-color);
		font-size: 14px;	
		text-align: center;	
		position: fixed;
		overflow: hidden;		
		z-index: 99;
		height: 0;	
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;	
		opacity: 0.9;
		
	}		
	.drop-menu-open{
		height: var(--menu-height);;
		animation: menuopen 0.3s;
	}
	@keyframes menuopen {
		from {			
			height: 0;
		}
		to {			
			height: var(--menu-height);
		}
	}
	.drop-menu-close{
		height: 0;
		animation: menuclose 0.3s;
	}
	@keyframes menuclose{
		from{
			height: var(--menu-height);
		}
		to{
			height: 0;
		}
	}
	.drop-menu-item {		
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		cursor: pointer;
		text-align: left;
		padding: 0 10px;	
	}
	.drop-menu-item:first-child{
		margin-top: 10px;
	}	
	.drop-menu-item:nth-last-child(2){
		margin-bottom: 10px;
	}
	.drop-menu-item:hover{
		background: var(--button-hover-back-color);		
		color: var(--button-active-text-color);
		cursor: pointer;	
	}
	.drop-menu-item:active{
		background: var(--button-active-back-color);
		color: var(--button-active-text-color);
		cursor: pointer;
	}
	.iconbefore{
		margin-right: 10px;	
		color: var(--icon-color);	
	}
	.iconafter{
		margin-left: 10px;
		color: var(--icon-new-color);
	}
	.toparrow{
		position: fixed;
		border-style: solid;
	    border-width: 0px 10px 10px 10px;
	    border-color: transparent transparent var(--drop-menu-arrow-color) transparent;
	    width: 0px;
	    height: 0px;
	}
	.leftarrow{
		position: fixed;
		border-style: solid;
        border-width: 10px 10px 10px 0px;
        border-color: transparent var(--drop-menu-arrow-color) transparent transparent ;
        width: 0px;
        height: 0px;
	}
	.rightarrow{
		position: fixed;
		border-style: solid;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent var(--drop-menu-arrow-color);
        width: 0px;
        height: 0px;
	}
	.bottomarrow{
		position: fixed;
		border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: var(--drop-menu-arrow-color) transparent transparent transparent;
        width: 0px;
        height: 0px;
	}	
		
	.drop-menu-item-icon{
		color: var(--icon-color);
		width: 38px;	
		margin-left: 10px;	
		font-size: 16px;
		margin-right: 10px;
	}	
</style>